<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <title>
        畜禽种类添加
    </title>
</head>
<body style="background-color: #ffffff">
<div id="app">

    <template v-loading="indexLoading">
        <el-page-header @back="goBack" content="添加页面">
        </el-page-header>
        <el-divider></el-divider>
        <el-row justify="space-around" type="flex">
            <el-col :span="15" style="border-right: 1px solid #a88d8d">
                <el-col :push=20>
                    <el-button  size="mini" type="success" @click="oneClickUpload" plain :loading="action">一键上传</el-button>
                </el-col>
                <el-collapse-transition>
                    <el-table
                            :data="tableData"
                            style="width: 100%">
                        <el-table-column label="序号" type="index"></el-table-column>
                        <el-table-column label="采集分类" prop="culturedCodeIdName"></el-table-column>
                        <el-table-column label="物种分类" prop="culturedTypeName"></el-table-column>
                        <el-table-column label="动物种名" prop="culturedName"></el-table-column>
                        <el-table-column label="备注" prop="remark"></el-table-column>
                        <el-table-column label="操作"  width="160">
                            <template slot-scope="scope">
                                <div v-loading="scope.row.action">
                                    <el-button  :disabled="scope.row.action"   @click="handleAction(scope.$index, scope.row,1)" size="mini">上传
                                    </el-button>
                                    <el-button @click="handleAction(scope.$index, scope.row,2)" :disabled="scope.row.action"  size="mini">编辑
                                    </el-button> <el-popconfirm
                                        confirm-button-text='好的' cancel-button-text='不用了'
                                        icon="el-icon-info" icon-color="red"  @confirm="handleAction(scope.$index, scope.row,3)"
                                        title="这是一段内容确定删除吗？" >
                                    <el-button slot="reference" :disabled="scope.row.action"   size="mini" type="danger">删除
                                    </el-button>
                                </el-popconfirm>
                                </div>
                            </template>

                        </el-table-column>
                    </el-table>
                </el-collapse-transition>
            </el-col>
            <el-col :span="8">
                <el-form :key="num" :model="ruleForm"  :rules="formRules" label-position="top" ref="ruleForm">
                    <table>
                        <tr>
                            <td colspan="2">
                                <el-form-item label="动物种名" prop="culturedName">
                                    <el-input placeholder="动物种名" size="small" v-model="ruleForm.culturedName"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <el-form-item  label="采集分类" prop="culturedCodeId" >
                                    <el-select placeholder="采集分类" size="small" v-model="ruleForm.culturedCodeId">
                                        <el-option :label="item.label" :value="item.value"
                                                   v-for="(item,i) of culturedCodeIds" :key="i"></el-option>
                                    </el-select>
                                </el-form-item>
                            </td>
                            <td>
                                <el-form-item label="物种分类" prop="culturedType" >
                                    <el-select placeholder="物种分类" size="small" v-model="ruleForm.culturedType">
                                        <el-option :label="item.label" :value="item.value"
                                                   v-for="(item,i) of culturedTypes" :key="i"></el-option>
                                    </el-select>
                                </el-form-item>
                            </td>
                        </tr>

                        <tr>
                            <td colspan="2">
                                <el-form-item label="备注" prop="remark">
                                    <el-input type="textarea" :rows="2" placeholder="备注" size="small" v-model="ruleForm.remark"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                    </table>

                    <el-form-item v-if="ruleForm.tableIndex===''">
                        <el-button @click="submitForm('ruleForm')" type="primary">立即创建</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                    <el-form-item v-else>
                        <el-button @click="submitForm('ruleForm')" type="primary">修改</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </template>
</div>

</body>
<!-- import Vue before Element -->
<script src="/static/vendor/vue.js"></script>
<script src="/static/vendor/skin/js/java.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                indexLoading: true,
                action:false,
                successLoading:true,
                ruleForm: {
                    tableIndex:'',
                    culturedCodeId:'',
                    culturedType:'',
                    culturedName:'',
                    remark:''
                },
                num: 0,
                tableData: [],
                filter:'',
                culturedCodeIds: [],
                culturedTypes: [],
                formRules: {
                    culturedCodeId: [
                        {required: true, message: '请选择采集分类', trigger: 'change'}
                    ],
                    culturedType: [
                        {required: true, message: '请选择品种分类', trigger: 'change'}
                    ],
                    culturedName: [
                        {required: true, message: '请填写动物种名', trigger: 'blur'},
                    ]
                }
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let parse = {}
                        parse = JSON.parse(JSON.stringify(this.ruleForm));
                        let tableIndex = parse.tableIndex;
                        for (let varietyElement of this.culturedCodeIds) {
                            if (varietyElement.value === parse.culturedCodeId) {
                                parse.culturedCodeIdName = varietyElement.label
                            }
                        }
                        for (let varietyElement of this.culturedTypes) {
                            if (varietyElement.value === parse.culturedType) {
                                parse.culturedTypeName = varietyElement.label
                            }
                        }
                        let msg=''
                        if (tableIndex!==''){
                            this.tableData.splice(tableIndex,1,parse)
                            this.ruleForm.tableIndex=''
                            msg='修改成功'
                        }else {
                            parse.action=false
                            parse.successLoading =true
                            this.tableData.push(parse);
                            msg='创建成功'
                        }
                        this.resetForm(formName)
                        this.$message({
                            message: msg,
                            type: 'success'
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            oneClickUpload(){
                let arr = this.tableData
                for (let i = 0; i < arr.length; i++) {
                    this.handleAction(0,arr[i],1)
                }
            },
            handleAction(index, row,type) {
                switch (type) {
                    case 1:{
                        row.action =true
                        /*上传*/
                        let bean ={
                            culturedCodeId:row.culturedCodeId,
                            culturedType:row.culturedType,
                            culturedName:row.culturedName,
                            remark:row.remark,
                        }
                        console.info(bean)
                        let res = top.ajax.synclBody("/yxProCultured/insertOne",bean);
                        if (res.data===1){
                            setTimeout(() => {
                                this.tableData.splice(index, 1);
                                this.$message({
                                    message: '上传成功',
                                    type: 'success'
                                });
                            }, 500);
                        }else {
                            this.$message.error('上传失败');
                            row.action =false
                        }
                        break;
                    }
                    case 2:{
                        /*编辑*/
                        row.tableIndex=index
                        this.ruleForm = row
                        break;
                    }
                    case 3:{
                        /*删除*/
                        this.tableData.splice(index, 1)
                        console.log(index, row);
                        break;
                    }
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            goBack() {
                window.history.back();
            },
            getCulturedCodeIds(){
                let dicts = top.ajax.syncl("/dictCategory/getDictList/cultured_code_id", "");
                let culturedCodeIds = [];
                for (let dict of dicts) {
                    let bean = {
                        value: dict.dict_code,
                        label: dict.dict_name
                    }
                    culturedCodeIds.push(bean)
                }
                this.culturedCodeIds = culturedCodeIds;
            },
            getCulturedTypes(){
                let dicts = top.ajax.syncl("/dictCategory/getDictList/cultured_type", "");
                let culturedTypes = [];
                for (let dict of dicts) {
                    let bean = {
                        value: dict.dict_code,
                        label: dict.dict_name
                    }
                    culturedTypes.push(bean)
                }
                this.culturedTypes = culturedTypes;
            },
        },
        mounted: function () {
            this.getCulturedCodeIds()
            this.getCulturedTypes()
        },
        created() {
            this.indexLoading = false
        },
    })
</script>
<style>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
</html>
